<template>
  <qh-page-view :showNavbar="false" bgColor="transparent">
    <view class="fixed-header" :class="{ 'header-scroll': isScrolled }">
      <uni-status-bar></uni-status-bar>
      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1">
          <!-- <text
              :class="{ 'icon-dark': isScrolled }"
              class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
              @click="backHome"
            ></text> -->
          <!-- :class="{ 'icon-dark': isScrolled }" -->
          <backHome />
          <!-- <view class="navbar-icon">
            <view class="icon-container">
              <text :class="{ 'icon-dark1': isScrolled }" class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
                @click="backHome"></text>
              <text class="divider"></text>
              <text class="qh-rt-single qh-rt-a-zu2432 search-icon navbar-back-icon" @click="showSearch"></text>
            </view>
          </view> -->
        </view>

        <view class="header-title" :class="{ 'text-dark': isScrolled }">
          {{ title }}
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
    </view>

    <scroll-view :lower-threshold="50" scroll-y @scroll="handleScroll" class="scrol-content" @scrolltolower="loadMore">
      <view style="position: relative">
        <view style="position: relative; height: 484rpx">
          <img style="position: absolute; height: 484rpx; width: 100%; z-index: 56" :src="category.background_image_url"
            alt="" />
        </view>
      </view>



      <view class="product-list-container">


        <!-- 标签切换区域 -->
        <view class="tab-container">
          <view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
            <text>热销榜</text>
            <view class="tab-line" v-if="activeTab === 0"></view>
          </view>
          <view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
            <text>回购榜</text>
            <view class="tab-line" v-if="activeTab === 1"></view>
          </view>
        </view>

        <!-- 商品列表 -->
        <view class="product-list">
          <!-- 使用单一模板展示不同标签内容 -->
          <view  v-for="tabIndex in [0, 1]" :key="tabIndex" v-show="activeTab === tabIndex" class="tab-content-item"
            :class="{ 'tab-content-active': activeTab === tabIndex }" >
            <view v-for="(item, index) in activeTab === 0 ? hotsalesList : repurchaseList" :key="index" >
              <view class="animationIcon">
                <view v-for="animation in animations" :key="animation.id">
                  <view v-if="animation.active && animationIndex === index" class="inner">
                    <view class="balt"></view>
                  </view>
                </view>
              </view>
            <view 
              class="product-item" :animation="productAnimation" >
              <!-- 排名徽章 -->
              <image v-if="index < 3" class="rank-badge" mode="aspectFill"
                :src="`https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-28/680f3ba${index === 0 ? '6948831704' : index === 1 ? '86ca943219' : 'a20b234648'}.png`">
              </image>

              <!-- 商品图片 -->
              <view class="product-image-container" style="position: relative;" @click="toDetail(item.id)">
                <image class="product-image" :src="item.goods_image" mode="aspectFill"></image>
                <view v-if="item.goods_num <= 0" class="sold-out-mask">
                  <text class="sold-out-text">已售空</text>
                </view>
              </view>

              <!-- 商品内容 -->
              <view class="product-content">
                <view class="product-title" @click="toDetail(item.id)">{{ item.goods_name }}</view>
                <!-- <view class="product-tags">
                    <text class="tag">温和清洁</text>
                    <text class="tag">深层洁净</text>
                    <text class="tag">成分精简</text>
                  </view> -->
                <view class="product-promotion" @click="toDetail(item.id)">
                  <text class="promotion-tag">一件只要{{ activeTab === 0 ? item.single_price : item.online_price }}</text>
                  <text v-if="item.online_price/item.retail_price !== 1" class="promotion-tag-blue">{{ (item.online_price/item.retail_price*10).toFixed(1) }}折扣</text>
                </view>
                <view class="product-price-row">
                  <view class="price-container" @click="toDetail(item.id)">
                    <view class="price-label" style="width: 80rpx;">抄底价</view>
                    <text class="price-value" >¥{{ item.online_price }}</text>
                    <text class="price-original" >市场均价 ¥{{ item.retail_price }}</text>
                  </view>

                  <view class="container">
                    <view class="button-container" style="display: flex;">
                      <!-- v-if="!item.skuDetailList"   -->
                      <view v-if="item.attribute_state == '1'" style="display: flex;">
                        <view :disabled="item.num === 0 || item.num < 0" @click="reduceShopping(item, index)"
                          class=" roundBtn icontext" :class="buttonClass(item) ? 'hidden' : 'visible-in'"
                          style="display: flex;justify-content: center;align-items: center;">
                          <text style="color: #FFB73F;font-size: 24rpx;"
                            class=" icontext qh-rt-single qh-rt-a-zu4424 car-num-icon"
                            :class="{ 'rotate': item.num === 0 }"></text>
                        </view>
                        <view :class="buttonClass(item) ? 'hidden' : 'visible-in'"
                          style="width: 40rpx; display: flex; align-items: center; justify-content: center;">
                          <view style="font-size: 20rpx;">{{ item.num }}</view>
                        </view>
                        <view class="roundBtn roundBtnBack" @click="addShopping(item, index)"
                          style="flex: 1;margin-right: 10rpx;">
                          <text style="color: #fff;font-size: 24rpx;"
                            class=" icontext qh-rt-single qh-rt-a-zu4423 car-num-icon"
                            :class="{ 'rotate': item.num > 0 }"></text>
                        </view>
                      </view>

                      <view v-if="item.attribute_state == '2'" @click="toDetail(item.id)">
                        <img @click="addShopping(item, index)" style=" width: 56rpx; height: 56rpx"
                          src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8cec859721757.png" />
                      </view>
                    </view>
                  </view>
                  <!-- <img style="margin-right: 16rpx; width: 26px; height: 26px"
                    src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8cec859721757.png" /> -->
                </view>
              </view>
            </view>
          </view>

          </view>
        </view>


        <view class="loading-container" v-if="currentList.length > 0">
          <view v-if="loading" class="loading-text">加载中...</view>
          <view v-else-if="currentFinished" class="finished-text">没有更多数据了</view>
        </view>
      </view>

      <view v-if="hotsalesList.length === 0 && repurchaseList.length === 0"
        style="height: 1000rpx;display: flex;align-items: center;justify-content: center;">
        <qh-empty-data text="暂无商品正在上传...."></qh-empty-data>
      </view>

      <shopping-pushpins></shopping-pushpins>


      <view :style="tabbarBoxStyle"></view>

    </scroll-view>
  </qh-page-view>
</template>

<script>
export default {
  data() {
    return {
      goodsChecked: [],
      isScrolled: false,
      title: "榜单",
      activeTab: 0, // 默认选中第一个标签（热销榜）
      productAnimation: {}, // 商品动画对象
      category: {},
      // 修改分页相关数据
      pageSize: 10, // 每页数量
      loading: false, // 加载状态
      goodsData: {
        0: { // 热销榜
          list: [],
          currentPage: 1,
          finished: false
        },
        1: { // 回购榜
          list: [],
          currentPage: 1,
          finished: false
        }
      },
      animations: [],
      animationIndex: null,
      goodsSizeList: {}, //用来传给多规格组件的对象
    };
  },
  computed: {
    tabbarBoxStyle() {
      return 'height:' + (this.$store.bottomHeight) + 'rpx'
    },
    currentList() {
      return this.goodsData[this.activeTab].list;
    },
    currentFinished() {
      return this.goodsData[this.activeTab].finished;
    },
    // 为了兼容旧代码，提供这些计算属性
    hotsalesList() {
      return this.goodsData[0].list;
    },
    repurchaseList() {
      return this.goodsData[1].list;
    },
    hotSalesFinished() {
      return this.goodsData[0].finished;
    },
    repurchaseFinished() {
      return this.goodsData[1].finished;
    }
  },
  onLoad(options) {
    if (options.category) {
      this.category = JSON.parse(decodeURIComponent(options.category));
      console.log(this.category, '父页面数据');
      this.title = this.category.name;

      // 初始化时只加载热销榜数据（sort=1）
      this.getGoodsData(this.category.id, 1, this.category.type);
    }
  },

  onReady() {
    // 创建动画实例
    this.animation = uni.createAnimation({
      duration: 300,
      timingFunction: 'ease',
    });

    // 初始化商品动画
    this.initProductAnimation();
  },
  methods: {

    addShopping(goods, index) {

      let goodsList = this.activeTab === 0 ? this.goodsData[0].list : this.goodsData[1].list;

      if (goods.attribute_state == 2) {
        this.$refs.popupComponent.handlerApply();

        goods.skuDetailList.forEach((item) => {
          const goodsNum = parseInt(item.goods_num);
          item.disabled = goodsNum <= 0;
        });
        this.goodsSizeList = goods;
        return;
      }

      this.$nextTick(async () => {
        if (goods.num > goods.goods_num) return;
        if (goods.goods_num <= 0) {
          return;
        }

        this.animationIndex = index;

        let item = {
          ...goodsList[index],
        };

        this.$set((this.activeTab === 0 ? this.goodsData[0].list : this.goodsData[1].list), index, item);

        if (item.num < item.goods_num) {
          item.num++;
        } else {
          uni.showToast({
            title: "库存不足",
            icon: "none",
          });
          return;
        }

        if (this.animationIndex === index) {
          const animation = {
            id: Date.now(),
            active: true,
          };
          this.animations.push(animation);
          setTimeout(() => {
            animation.active = false;
            setTimeout(() => {
              this.animations = this.animations.filter(
                (anim) => anim.id !== animation.id
              );
            }, 1000);
          }, 1000);
        }
        console.log(item, 'itemitemitemitemitemitemitemitemitemitem')
        const status = await this.$mutations.setShoppingCar({
          goods_id: item.id,
          // sku_id: item.sku_id,
          num: item.num,
        });

        const existingItem = this.goodsChecked.find(
          (item) => item.goods_id === goods.id
        );

        if (!existingItem) {
          this.goodsChecked.push({
            goods_id: item.id,
          });
        }
        this.$store.checkedList = this.goodsChecked;

        console.log(this.$store.checkedList, 'this.$store.checkedList')
        // if (status) {
        //   this.getDataList();
        // }
        // if (status == false) {
        //   item.num--
        // }
      });
    },

    reduceShopping(goods, index) {
      this.$nextTick(async () => {
        let goodsList = this.activeTab === 0 ? this.goodsData[0].list : this.goodsData[1].list;

        let item = {
          ...goodsList[index],
        };
        // this.$set(this.goodsList, index, item);
        this.$set((this.activeTab === 0 ? this.goodsData[0].list : this.goodsData[1].list), index, item);

        item.num--;
        if (item.num === 0) {
          let indexToDelete = this.indexes.indexOf(index);
          if (indexToDelete !== -1) {
            this.indexes.splice(indexToDelete, 1);
          }
        }

        console.log(item.num, 'itemitemitemitemitemitemitemitemitemitem')
        const status = await this.$mutations.setShoppingCar({
          // id: item.id,
          goods_id: item.id,
          // sku_id: item.sku_id,
          num: item.num,
        });
        // if (status) {
        //   this.getDataList();
        // }
      });
    },

    buttonClass(item) {
      if (item.num === 0) {
        return true;
      }
      if (item.count > 0) {
        return false;
      }
    },
    async getDataList() {
      // const {
      //     status,
      //     data: { list, count },
      //     message,
      // } = await this.$request(
      //     "SmallProgramApi/Shopping/getShoppingGoods_v4",
      //     { store_id: this.$store.mallStoreId }
      // );

      //购物车的数据
      this.goodsData[0].list.forEach((item) => {
        let matchedItem = this.$store.merShoppingGoodsList.find(
          (el) => el.goods_id === item.id
        );
        if (matchedItem) {
          item.num = matchedItem.num;
        } else {
          this.indexes = []
          item.num = 0;
        }
      });
      this.goodsData[1].list.forEach((item) => {
        let matchedItem = this.$store.merShoppingGoodsList.find(
          (el) => el.goods_id === item.id
        );
        if (matchedItem) {
          item.num = matchedItem.num;
        } else {
          this.indexes = []
          item.num = 0;
        }
      });


      this.goodsData[1].list.forEach((item, index) => {
        if (item.num > 0) {
          this.indexes.push(index);
        }
      });
      this.goodsData[0].list.forEach((item, index) => {
        if (item.num > 0) {
          this.indexes.push(index);
        }
      });
      this.indexes = [...new Set(this.indexes)];

      console.log(this.goodsData, '商品数据');
      this.$forceUpdate();
    },

    toDetail(id) {
      uni.navigateTo({
        url: "/pages/mer/goods/details/details?id=" + id,
      });
    },
    // 加载更多数据
    loadMore() {
      console.log('触发加载更多');

      if (this.loading || this.goodsData[this.activeTab].finished) {
        console.log('正在加载或已加载完成，不执行加载更多');
        return;
      }

      // 根据当前标签选择正确的 sort 值
      const sort = this.activeTab === 0 ? 1 : 4;

      // 增加当前标签的页码
      this.goodsData[this.activeTab].currentPage++;

      this.getGoodsData(this.category.id, sort, this.category.type, true);
    },

    // 获取商品数据（修改为支持分页）
    async getGoodsData(id, sort, type, isLoadMore = false) {
      // 确定当前标签索引
      const tabIndex = sort === 1 ? 0 : 1;

      // 如果正在加载或已加载完成且是加载更多操作，则直接返回
      if (this.loading || (this.goodsData[tabIndex].finished && isLoadMore)) {
        console.log('跳过加载：已完成或正在加载');
        return;
      }

      this.loading = true;
      try {
        // 如果不是加载更多，重置页码为1
        if (!isLoadMore) {
          this.goodsData[tabIndex].currentPage = 1;
        }

        // 获取当前页码
        const currentPage = this.goodsData[tabIndex].currentPage;

        console.log('请求参数:', {
          store_id: this.$store.mallStoreId,
          id,
          sort,
          type,
          page: currentPage,
          limit: this.pageSize
        });

        const { status, data } = await this.$request(
          "SmallProgramApi/Goods/getGoodsList_v2",
          {
            store_id: this.$store.mallStoreId,
            id,
            sort,
            type,
            page: currentPage,
            limit: this.pageSize
          }
        );

        if (status === 1 && data) {
          // 检查 data 是否已经是数组，并获取正确的数据列表
          let dataList = [];
          if (data.data && Array.isArray(data.data)) {
            dataList = data.data;
          } else if (Array.isArray(data)) {
            dataList = data;
          } else if (typeof data === 'object') {
            // 尝试从其他可能的属性中获取数据
            const possibleListProps = ['list', 'items', 'goods', 'records'];
            for (const prop of possibleListProps) {
              if (data[prop] && Array.isArray(data[prop])) {
                dataList = data[prop];
                break;
              }
            }
          }

          // 检查是否有新数据
          if (dataList.length === 0) {
            // 没有新数据，标记为加载完成
            this.goodsData[tabIndex].finished = true;
            console.log('没有更多数据，标记为加载完成');
            return;
          }

          if (isLoadMore) {
            // 加载更多时，将新数据追加到现有数据后面
            this.goodsData[tabIndex].list = [...this.goodsData[tabIndex].list, ...dataList];
          } else {
            // 首次加载或刷新时，直接替换数据
            this.goodsData[tabIndex].list = dataList;
          }

          console.log('更新后的列表数据长度:', this.goodsData[tabIndex].list.length);

          // 判断是否已加载完所有数据
          this.goodsData[tabIndex].finished = dataList.length < this.pageSize;

          console.log('分页状态更新:', {
            currentPage: currentPage,
            finished: this.goodsData[tabIndex].finished
          });
        } else {
          // 请求失败或没有数据时，标记为加载完成
          this.goodsData[tabIndex].finished = true;
          console.log('请求失败或无数据，标记为加载完成');
        }
      } catch (error) {
        console.error('获取商品数据失败:', error);
        // 发生错误时也标记为加载完成
        this.goodsData[tabIndex].finished = true;
      } finally {
        this.loading = false;
        this.getDataList()
      }
    },

    // 刷新数据（重置分页并重新加载）
    refreshData() {
      // 重置所有标签的分页信息
      Object.keys(this.goodsData).forEach(key => {
        this.goodsData[key].currentPage = 1;
        this.goodsData[key].finished = false;
      });

      // 根据当前激活的标签决定使用哪个sort值
      const sort = this.activeTab === 0 ? 1 : 4;
      this.getGoodsData(this.category.id, sort, this.category.type);
    },

    // 切换标签时重置分页并加载对应数据
    switchTab(index) {
      if (this.activeTab === index) return;
      this.activeTab = index;

      // 如果当前标签没有数据且未标记为加载完成，则加载数据
      if (this.goodsData[index].list.length === 0 && !this.goodsData[index].finished) {
        // 根据 activeTab 计算正确的 sort 值
        const sort = index === 0 ? 1 : 4;
        console.log('切换标签，当前标签索引:', index);
        console.log('计算得到的 sort 值:', sort);

        // 加载新标签的数据
        this.getGoodsData(this.category.id, sort, this.category.type);
      }

      // 播放商品动画
      this.playProductAnimation();
    },

    showSearch() {
      uni.navigateTo({
        url: "/pages/mer/goods/search/search?search=1",
      });
    },
    // 删除这个重复的 switchTab 方法

    // 初始化商品动画
    initProductAnimation() {
      this.animation.opacity(0).translateY(20).step();
      this.productAnimation = this.animation.export();

      // 延迟一下再显示，产生入场动画效果
      setTimeout(() => {
        this.playProductAnimation();
      }, 100);
    },

    // 播放商品动画
    playProductAnimation() {
      this.animation.opacity(0).translateY(20).step({ duration: 0 });
      this.productAnimation = this.animation.export();

      setTimeout(() => {
        this.animation.opacity(1).translateY(0).step();
        this.productAnimation = this.animation.export();
      }, 100);
    },
    handleScroll(e) {
      this.isScrolled = e.detail.scrollTop > 50;
    },
    backHome() {
      uni.navigateBack();
    },
  },
  onPageScroll(e) {
    this.isScrolled = e.scrollTop > 50;
    console.log("page scroll:", e.scrollTop);
    console.log(this.activeTab);
  },
};
</script>
<style lang="less">
@import "@/static/css/common-goods.css";
</style>

<style lang="less" scoped>
.animationIcon {
  position: relative;
  top: 35rpx;
  right: -590rpx;
  z-index: 999;
}

.balt,
.baltRight {
  position: absolute;
  background: red;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  z-index: 99999;
}

.inner,
.innerRight {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 99999;
}

.balt {
  animation: moveX 1s 1;
}

.inner {
  animation: moveY 1s cubic-bezier(1, -1, 1, 10) 1;
}

.baltRight {
  animation: moveXR 1s 1;
}

.innerRight {
  animation: moveYR 1s cubic-bezier(1, -1, 1, 10) 1;
}

@keyframes moveX {
  50% {
    transform: translateX(-200px);
  }

  100% {
    transform: translateX(-200px);
  }
}

@keyframes moveY {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}

@keyframes moveXR {
  50% {
    transform: translateX(180px);
  }

  100% {
    transform: translateX(180px);
  }
}

@keyframes moveYR {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}

.product-image-container {
  position: relative;
  // width: 100%;
  height: 100%;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.sold-out-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 160rpx;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.sold-out-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
}
</style>

<style scoped lang="scss">
.loading-container {
  padding: 20rpx 0;
  text-align: center;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-text,
.finished-text {
  font-size: 28rpx;
  color: #999;
  padding: 20rpx 0;
}


.product-list-container {
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
}

.tab-container {
  display: flex;
  justify-content: space-around;
  // background-color: #fff;
  padding: 0 30rpx;
  height: 80rpx;
}

.tab-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9rpx;
  font-size: 30rpx;
  margin-right: 40rpx;
  transition: all 0.3s ease;
  font-weight: bold;

  &.active {
    color: #F69A00;
    font-weight: bold;
    transform: scale(1.05);

    .tab-line {
      position: absolute;
      bottom: 0;
      left: 16rpx;
      width: 77%;
      height: 5rpx;
      background-color: #F69A00;
      animation: tabLineAnim 0.3s ease-in-out;
    }
  }
}

@keyframes tabLineAnim {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.product-list {
  padding: 0 20rpx;
  position: relative;
}

.tab-content-item {
  opacity: 0;
  transition: opacity 0.3s ease;

  &.tab-content-active {
    opacity: 1;
  }
}

.product-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: 20rpx;
  position: relative;
  transition: transform 0.2s ease;

  &:active {
    transform: scale(0.98);
  }
}

.rank-badge {
  position: absolute;
  top: 15rpx;
  left: 10rpx;
  width: 54rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
  border-top-left-radius: 12rpx;
  border-bottom-right-radius: 12rpx;
  z-index: 999;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.product-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* 显示的行数 */
  -webkit-box-orient: vertical;
  width: 100%;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10rpx;
}

.tag {
  font-size: 22rpx;
  color: #999;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
  margin-bottom: 6rpx;
  position: relative;

  &::after {
    content: "|";
    position: absolute;
    right: -5rpx;
    color: #ddd;
  }

  &:last-child::after {
    display: none;
  }
}

.product-promotion {
  margin: 10rpx 0;
}

.promotion-tag {
  display: inline-block;
  font-size: 22rpx;
  color: #e89b1c;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  border: 1rpx solid #e89b1c;
}

.promotion-tag-blue{
  display: inline-block;
  font-size: 22rpx;
  color: green;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  border: 1rpx solid green;
  margin-left: 10rpx;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-container {
  display: flex;
  align-items: center;
}

.price-label {
  font-size: 20rpx;
  color: #ff730a;
  // padding: 2rpx 8rpx;
  border-radius: 4rpx;
}

.price-value {
  font-size: 36rpx;
  color: #ff730a;
  font-weight: bold;
}

.price-original {
  font-size: 22rpx;
  color: #999;
  margin-left: 10rpx;
  text-decoration: line-through;

  &::before {
    content: " ";
    display: inline-block;
    width: 2rpx;
  }
}

.cart-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #e89b1c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cart-btn-hover {
  transform: scale(1.1);
  background-color: #d68a0e;
}

.cart-icon {
  color: #fff;
  font-size: 36rpx;
  font-family: "iconfont";
}
</style>

<style lang="scss" scoped>
.navbar-icon {
  width: 174rpx;
  height: 64rpx;
  // background: rgba(25, 25, 25, 0.5);
  background: rgba(25, 25, 25, 0.16);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin-left: 24rpx;
}

.icon-container {
  display: flex;
  align-items: center;
  gap: 28rpx;
}

.divider {
  width: 2rpx;
  height: 24rpx;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
}

.navbar-back-icon {
  font-size: 32rpx;
  color: #fff;
  transition: color 0.3s ease;
}



.temperature-box {
  background-color: #c39646;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  color: #ffffff;
  font-size: 20rpx;
  margin-top: 8rpx;
  height: 28rpx;
  text-align: center;
  padding: 5rpx;
  line-height: 28rpx;
}

.scrol-content {
  height: 100vh;
  background-color: #fff;
}

.obj-product-card-content {
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17338836586758f70a79f24.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 10px;
}

.obj-product-list {
  background: #fff;
  padding: 20rpx;
}

.obj-product-card {
  margin-bottom: 20rpx;
  background: #fff;
  margin: 10px;
  // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  // padding: 10px;
  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
  // flex: 1 1 calc(33.333% - 20px);
  // box-sizing: border-box;
}

.obj-product-image {
  width: 180rpx;
  height: 180rpx;
  margin: 30rpx;
  flex-shrink: 0;
}

.obj-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 30rpx;
  height: 180rpx;
}

.obj-product-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 100%;
  margin: 0;
  padding: 0;
}

.obj-price-area {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.obj-tag-container {
  margin: 0;

  .obj-tag {
    display: inline-block;
    padding: 4rpx 12rpx;
    background: #fff2e5;
    color: #c72525;
    font-size: 24rpx;
    border-radius: 4rpx;
  }
}

.obj-bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.obj-price {
  display: flex;
  align-items: baseline;
  flex-direction: column;

  .obj-currency {
    font-size: 24rpx;
    color: #c72525;
    margin-right: 2rpx;
  }

  .obj-amount {
    font-size: 36rpx;
    color: #c72525;
    font-weight: bold;
  }
}

.obj-buy-button {
  background: #ff6a00;
  color: #fff;
  font-size: 26rpx;
  padding: 10rpx 32rpx;
  border-radius: 30rpx;
  border: none;
  line-height: 1.5;
  margin: 0;
  min-width: 140rpx;
  text-align: center;
}
</style>

<style lang="scss" scoped>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.3s ease;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: transparent;

  .header-title {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    font-family: ".PingFang SC, PingFang SC";
    display: flex;
    justify-content: center;
    align-content: center;
    flex: 1;
    color: #000;
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .navbar-back-icon {
    color: #fff;
    transition: color 0.3s ease;
  }
}

.header-scroll {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  .icon-dark {
    color: #000;
  }

  .text-dark {
    color: #000 !important;
  }
}

.benner_box {
  position: relative;
  width: 100%;
  margin-top: calc(88rpx + 44px);
}

.search-box {
  height: 102rpx;
  // padding: 12rpx 24rpx;
  // box-sizing: border-box;
  // box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
  z-index: 1;

  .search-content {
    height: 64rpx;
    width: 448rpx;
    padding: 0 0 0 24rpx;
    border: 2rpx solid var(--primary-color);
    border-radius: 34rpx;
    box-sizing: border-box;
    background-color: #ffffff;

    .search-icon {
      font-size: 28rpx;
      color: #999999;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      line-height: 48rpx;
      color: #333333;
      margin: 0 10rpx;
      height: 48rpx;
    }

    .search-btn {
      width: 124rpx;
      height: 100%;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      line-height: 48rpx;
      // background-color: var(--primary-color);
      border-radius: 32rpx;
      margin-right: -1rpx;
    }
  }
}
</style>
